<div class="vex vex-theme-os upload" xmlns="http://www.w3.org/1999/html">
    <div class="vex-dialog-form">
        <h5 i18n="@@upload-file.title">Upload image,video or pdf to study</h5>
        <div class="content">
<!--            <label>Select the ae title:</label>
            <mat-select [ngModel]="selectedAe" (ngModelChange)="selectedAe = $event">
                <mat-option *ngFor="let ae of aes" [value]="ae.dicomAETitle" title="{{ae.dicomDescription}}">{{ ae.dicomAETitle }}</mat-option>
            </mat-select>-->
            <ng-container *ngIf="!fromExternalWebApp">
                <label i18n="@@select_the_stow_rs_server">Select the STOW-RS server:</label>
                <mat-select [ngModel]="selectedWebApp" (ngModelChange)="selectedWebApp = $event">
                    <mat-option *ngFor="let webApp of webApps" [value]="webApp" title="{{webApp.dcmWebAppName }}({{webApp.dicomAETitle }},{{webApp.dicomDeviceName}})">{{ webApp.dcmWebAppName }}</mat-option>
                </mat-select>
            </ng-container>
            <label i18n="@@chose_a_file_to_upload">Choose a File to upload:</label><br>
            <input type="file" [(ngModel)]="file" (change)="fileChange($event)" i18n-placeholder="@@upload_file" placeholder="Upload file"  accept="image/jpeg, image/png, image/gif, image/tiff ,video/mpeg,video/mp4,video/quicktime,application/pdf" multiple>
            <ng-container *ngIf="isImage">
                <label i18n="@@captured_image_type">Captured Image Type:</label>
                <mat-select [ngModel]="selectedSopClass" (ngModelChange)="selectedSopClass = $event">
                    <mat-option *ngFor="let type of imageType" [value]="type" title="{{type.description}}">{{ type.title }}</mat-option>
                </mat-select>
            </ng-container>
<!--            <ng-container *ngIf="!moreAttributes && file">
                <label title="Series Number">Series Number:</label><input type="number" [(ngModel)]="seriesNumber"><br>
                &lt;!&ndash;<label title="Series Description">Instance Number:</label><input type="number" [(ngModel)]="instanceNumber"><br>&ndash;&gt;
                <label title="Series Description">Description:</label><input type="text" [(ngModel)]="description"><br>
            </ng-container>-->
            <button class="edit_attribute_button" *ngIf="file" (click)="showMoreAttributes()" i18n="@@edit_attributes">Edit Attributes</button>

            <div class="edit_attribute_block" *ngIf="moreAttributes && file">
                <edit-study [study]="tempAttributes" [iod]="iod" [mode]="'edit'" [dropdown]="dropdown" (onChange)="onStudyChange($event)"></edit-study>
            </div>
            <div mat-dialog-content>
                <ng-container *ngIf="showFileList">
                    <div class="upload_state" *ngFor="let file of fileList">
                        {{file.name |trim:62}}
                        <span class="text-danger" *ngIf="percentComplete[file.name] && percentComplete[file.name].status">Error {{percentComplete[file.name].status}}</span>
                        <span class="upload_ticker" *ngIf="percentComplete[file.name] && percentComplete[file.name].showLoader && !percentComplete[file.name].showTicker"><i class="fa fa-circle-o-notch fa-spin"></i></span>
                        <span class="upload_ticker"  *ngIf="percentComplete[file.name] && percentComplete[file.name].showTicker"><i class="material-icons">check</i></span>
                        <div *ngIf="percentComplete[file.name]">
                            <mat-progress-bar color="primary" mode="determinate" [value]="percentComplete[file.name].value"></mat-progress-bar>
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>
        <div class="dialogbuttons">
            <button class="save" type="button" (click)="upload()" i18n="@@START_UPLOADING">START UPLOADING</button>
            <button class="cancle" type="button" (click)="close(dialogRef)" i18n="@@CLOSE">CLOSE</button>
        </div>
    </div>
</div>

